#root {
  height: 100%;

  #development {
    height: 100%;
    overflow: hidden;

    & > div {
      width: 100%;
      display: inline-block;
      .ant-carousel {
        width: 100%;
        height: 100%;
        .carousel-item {
          height: 100vh !important;
          overflow: auto;
          position: relative;

          &:before {
            content: attr(type);
            position: absolute;
            left: 50%;
            bottom: 25px;
            color: rgba(0, 0, 0, 0.3);
            font-size: 40px;
            transform: translate(-50%, -50%);
          }
        }
      }
    }

    #configuration {
      padding: 20px 10px 0 10px;
      height: 100%;
      background-color: #f0f2f5;
      overflow: auto;
      width: 300px;
      float: right;
    }

    .ant-carousel .slick-dots.slick-dots-bottom li {
      background: #0a151f;
    }

    .ant-carousel .slick-dots.slick-dots-bottom li.slick-active button {
      background: red;
    }

    .slick-dots-bottom {
      transform: scale(1.3);
      bottom: 120px;
    }
  }

}
